<template>
    <div>
        <!--{{ 文本插值表达式 }}-->
        <h1>我是组合api：{{ msg }}</h1>
        <span v-html="msg"></span>
        <h3>我的数字会变化：{{ count }}</h3>
        <button @click="count++">点击对数据增加1</button>
    </div>
</template>

<script setup lang="ts">
import { reactive, ref } from 'vue';
// 在vue中 组件化  响应式的处理方式
const msg = "<span style='color:red'>我属于vue3的组合api</span>"
//添加ref 为变量生成响应式处理
//总结： 在组合式api中 只要数据需要改变的时候 就需要采用响应式的处理方式
var count = ref(0)
// let data=reactive({})

</script>

<style scoped>

</style>